<template>
  <div class="base-wrapper">
    <el-tabs v-model="activeName">
      <el-tab-pane label="修改历史" name="first">
        <main class="main_content">
          <!-- 按钮 -->
          <section class="button_part">
            <el-button size="mini" @click="handleSwitch">{{ buttonText }}</el-button>
          </section>
          <!-- 💭字段 -->
          <div v-if="buttonText === '按修改批次查看'" style="height: 95%; overflow: auto">
            <el-table :header-cell-style="{ background: 'rgba(117, 60, 202, 0.04)' }" :stripe="true" :data="tableData">
              <el-table-column type="index" width="50" align="center"> </el-table-column>
              <el-table-column label="表ID" align="center" prop="versionNum"></el-table-column>
              <el-table-column label="字段名" align="center" prop="updateKey"></el-table-column>
              <el-table-column label="序号" align="center" prop="serialNumber"></el-table-column>
              <el-table-column label="上次录入值" align="center" prop="updateOldValue"></el-table-column>
              <el-table-column label="本次修改值" align="center" prop="updateNewValue"></el-table-column>
              <el-table-column label="附加属性" align="center"></el-table-column>
              <el-table-column label="本次修改日期" align="center" prop="createTime"></el-table-column>
              <el-table-column label="修改人" align="center" prop="updateName"></el-table-column>
              <el-table-column label="修改原因" align="center" prop="updateCause"></el-table-column>
            </el-table>
          </div>
          <!-- 💭批次 -->
          <div v-show="buttonText === '按字段查看'" style="height: 95%; overflow: auto">
            <el-table
              :header-cell-style="{ background: 'rgba(117, 60, 202, 0.04)' }"
              :stripe="true"
              :data="tableDataData"
              @expand-change="handleExpand"
            >
              <!-- 折叠行 -->
              <el-table-column type="expand">
                <template v-slot="{ row }">
                  <el-table :data="row.expandDetail">
                    <el-table-column label="字段名称" align="center" prop="updateKey"> </el-table-column>
                    <el-table-column label="修改前" align="center" prop="updateOldValue"> </el-table-column>
                    <el-table-column label="修改后" align="center" prop="updateNewValue"> </el-table-column>
                  </el-table>
                </template>
              </el-table-column>
              <el-table-column type="index" label="序号" width="50" align="center"> </el-table-column>
              <el-table-column label="修改人" align="center" prop="updateName"></el-table-column>
              <el-table-column label="修改时间" align="center" prop="updateTime"></el-table-column>
              <el-table-column label="IP地址" align="center" prop="ipAddress"></el-table-column>
              <el-table-column label="修改原因" align="center" prop="updateCause"></el-table-column>
            </el-table>
          </div>
        </main>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { cloneDeep } from 'lodash-es'
import { mapActions } from 'vuex'
export default {
  data() {
    return {
      activeName: 'first',
      buttonText: '按修改批次查看',
      tableData: [],
      tableDataData: [],
    }
  },
  created() {
    this.getWordTableData()
    this.getBatchTableData()
  },
  methods: {
    ...mapActions('solutionVersion', [
      'checkECRFVersionWordAPI',
      'checkECRFVersionBatchAPI',
      'checkECRFVersionBatchDetailAPI',
    ]),
    handleSwitch() {
      if (this.buttonText === '按修改批次查看') {
        this.buttonText = '按字段查看'
      } else {
        this.buttonText = '按修改批次查看'
      }
    },
    // 获取字段表格
    async getWordTableData() {
      const params = {
        ecrfVersionId: this.$route.query.id,
      }
      const res = await this.checkECRFVersionWordAPI({ params })
      if (res.code === 200) {
        // 数据处理
        const array = []
        const arr = cloneDeep(res.data)
        arr.forEach(item => {
          let serialNumber = 0
          item.fileBatchVOS.forEach((it, index) => {
            serialNumber = serialNumber + 1
            it.serialNumber = serialNumber
            if (index !== 0) {
              // 非首个设置成空字符串
              it.updateKey = ''
            } else {
              // 首个添加表ID
              it.versionNum = this.$route.query.versionNum
            }
            array.push(it)
          })
        })
        this.tableData = array
      }
    },
    // 获取批次表格
    async getBatchTableData() {
      const params = {
        ecrfVersionId: this.$route.query.id,
      }
      const res = await this.checkECRFVersionBatchAPI({ params })
      if (res.code === 200) {
        const arr = cloneDeep(res.data)
        arr.forEach(item => {
          item.expandDetail = []
        })
        this.tableDataData = arr
      }
    },
    // 表格展开事件
    async handleExpand(row, expandDetail) {
      // 判断是否是展开
      const isTrue = expandDetail.some(item => (item.groupId = row.groupId))
      if (isTrue) {
        const params = {
          groupId: row.groupId,
        }
        // 获取批次表格详情
        const res = await this.checkECRFVersionBatchDetailAPI({ params })
        if (res.code === 200) {
          this.tableDataData.forEach(item => {
            if (item.id === row.id) {
              item.expandDetail = res.data
            }
          })
        }
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.base-wrapper {
  background-color: $white;
  height: 100%;
  .main_content {
    background-color: $white;
    padding: 24px;
    .button_part {
      margin-bottom: 24px;
    }
    .table_part {
      height: 95%;
      overflow: auto;
    }
  }
}
</style>
